<template>
  <!-- 查看授权列表 -->
  <div class="impoweList">
    <div class="padding15All flexbetween" style="height:50px;box-sizing:border-box;border-bottom:2px solid #F5F6F7">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{name:'sealAdminBusiness'}">印章管理</el-breadcrumb-item>
        <el-breadcrumb-item>授权列表</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div style="height:15px;background-color: #F5F6F7;"></div>
    <p class="tabtext padding15All">印章名称：{{ sealName }}</p>
    <div>
      <el-radio-group v-model="sealUseType" class="margin-left1" size="small" @input="getSealUseType">
        <el-radio-button label="0">印章使用员</el-radio-button>
        <el-radio-button label="1">印章审批员</el-radio-button>
      </el-radio-group>
    </div>
    <div v-show="sealUseType === '0'">
      <div class="padding15All tableMain">
        <el-table
          v-loading="sealUserTableLoading1"
          :data="sealUserTable1"
          tooltip-effect="dark">
          <el-table-column
            label="头像"
            prop="userPhone">
            <template slot-scope="scope">
              <img :src="scope.row.userHeadImg" alt="" style="width: 80px;height: 80px">
            </template>
          </el-table-column>
          <el-table-column
            label="授权对象"
            prop="userName">
          </el-table-column>
          <el-table-column
            label="账号"
            prop="userPhone">
          </el-table-column>
          <el-table-column
            fixed="right"
            label="操作">
            <template slot-scope="scope">
              <el-button type="text" @click="delSealUser1(scope.row.jurisdictionId)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div v-show="sealUseType === '1'">
      <div class="padding15All tableMain">
        <el-table
          v-loading="sealUserTableLoading2"
          :data="sealUserTable2"
          tooltip-effect="dark">
          <el-table-column
            label="头像"
            prop="userPhone">
            <template slot-scope="scope">
              <img :src="scope.row.userHeadImg" alt="" style="width: 80px;height: 80px">
            </template>
          </el-table-column>
          <el-table-column
            label="授权对象"
            prop="userName">
          </el-table-column>
          <el-table-column
            label="账号"
            prop="userPhone">
          </el-table-column>
          <el-table-column
            fixed="right"
            label="操作">
            <template slot-scope="scope">
              <el-button type="text" @click="delSealUser2(scope.row.jurisdictionId)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
import { deleteUserSealJurisdiction, userSealJurisdictionList } from "@/api/business";

export default {
  data() {
    return {
      sealName: this.$route.query.name || "",
      sealId: this.$route.query.id || "",
      sealUserTable1: [],
      sealUserTableLoading1: false,
      sealUserTable2: [],
      sealUserTableLoading2: false,
      sealUseType: "0"
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.getUserSealJurisdictionList1();
    },
    getUserSealJurisdictionList1() {
      this.sealUserTableLoading1 = true;
      userSealJurisdictionList({ sealId: this.sealId }).then(res => {
        this.sealUserTableLoading1 = false;
        this.sealUserTable1 = res.result.useList;
      });
    },
    getUserSealJurisdictionList2() {
      this.sealUserTableLoading2 = true;
      userSealJurisdictionList({ sealId: this.sealId }).then(res => {
        this.sealUserTableLoading2 = false;
        this.sealUserTable2 = res.result.approvalList;
      });
    },
    delSealUser1(id) {
      this.$alert("确定删除吗？", "删除", {
        confirmButtonText: "确定",
        cancelButtonClass: "点错了",
        callback: action => {
          if (action === "confirm") {
            deleteUserSealJurisdiction({ jurisdictionId: id }).then(res => {
              if (res.code === 200) {
                this.$message.success(res.message);
                this.getUserSealJurisdictionList1();
              }
            });
          }
        }
      });
    },
    delSealUser2(id) {
      this.$alert("确定删除吗？", "删除", {
        confirmButtonText: "确定",
        cancelButtonClass: "点错了",
        callback: action => {
          if (action === "confirm") {
            deleteUserSealJurisdiction({ jurisdictionId: id }).then(res => {
              if (res.code === 200) {
                this.$message.success(res.message);
                this.getUserSealJurisdictionList2();
              }
            });
          }
        }
      });
    },
    getSealUseType(name) {
      if (name === "0") {
        this.getUserSealJurisdictionList1();
      }
      if (name === "1") {
        this.getUserSealJurisdictionList2();
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.impoweList {
  height: 100%;
  position: relative;

  .pages {
    width: calc(100% - 30px);
    position: absolute;
    bottom: 0;
    border-top: 2px solid #F5F6F7;
  }

  .templateList {
    height: 400px;
    overflow-y: scroll;
  }
}
</style>